<template>
  <div class="swiper-wrap">
    <!-- swiper 相册跑马灯效果  swiper-no-swiping禁止鼠标左右滑动-->
    <div v-swiper:mySwiper="swiperOption" class="swiper-no-swiping">
      <div class="swiper-wrapper">
        <div v-for="(item,index) in 12" :key="index" class="swiper-slide">
          <div class="item">
            <div><img src="~static/img/t1.jpg"></div>
            <div>
              这是礼物
            </div>
          </div>
        </div>
      </div>
    <!-- 分页器 -->
    <!-- <div class="swiper-pagination" /> -->
    <!-- 滚动条 -->
    <!-- <div class="swiper-scrollbar" /> -->
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      swiperOption: {
        loop: true,
        slidesPerView: 3, // 设置显示三张
        // centeredSlides : true,     //使当前图片居中显示
        freeMode: true, // 使幻灯片滑动时不止滑动一格，且不会自动贴合
        slidesPerGroup: 1, // 定义1张图片为一组
        speed: 3000, // 设置过度时间
        resistanceRatio: 0, // 禁止左右滑动到最前和最后一张图片回弹
        grabCursor: true, // 鼠标样式根据浏览器不同而定
        autoplay: {
          delay: 1,
          disableOnInteraction: false
        }

        /*  设置每隔3000毫秒切换 */
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true
        // },
        // scrollbar: {
        //   el: '.swiper-scrollbar',
        //   hide: true
        // }
      }
    }
  },
  mounted () {
    console.log('Current Swiper instance object', this.mySwiper) // swiper实例
    // this.mySwiper.slideTo(3, 1000, false)
  }
}
</script>
<style lang='scss'>
.swiper-wrap{
  width: 1300px;
  margin: 0 auto;
}
.swiper-container {
  width: 43.75rem;
  height: 10.125rem;
  margin: 0 auto;
}
.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: linear;  /* 必加的样式，且不能设置css作用域scoped */
}

.item{
  display: flex;
  img{
    width: 30px;
    height: 30px;
  }
}
</style>
